<!-- @format -->

<script setup>
	import { computed, ref, reactive, watch } from 'vue'

	const KEY = 'bit-goodsSystem__key'

	// 商品列表
	const goodsList = ref(
		// 从本地取上一次的数组，并且需要反序列化，因为可能取不到(值为null)，
		// 配合逻辑或的短路运算，赋值后面的默认数组
		JSON.parse(localStorage.getItem(KEY)) || [
			{ id: 190, name: '魏家凉皮', price: 10, num: 2 },
			{ id: 237, name: '肉夹馍', price: 11, num: 3 },
			{ id: 163, name: '冰峰', price: 3, num: 2 }
		]
	)

	// 收集的商品信息
	const goodsItem = reactive({
		name: '', // 名称
		price: '', // 价格
		num: '' // 数量
	})

	// 新增
	const add = () => {
		// 非空校验
		if (!goodsItem.name || !goodsItem.price || !goodsItem.num) {
			return alert('商品名称或价格或数量不能为空')
		}

		// 给数组添加一个新对象
		goodsList.value.push({
			// 展开 goodsItem 对象
			...goodsItem,
			// 新增 id 属性
			id: Date.now() // 时间戳
		})

		// 清空输入框
		goodsItem.name = goodsItem.price = goodsItem.num = ''
	}

	// 删除
	const del = (i) => {
		if (window.confirm('确认删除么?')) {
			goodsList.value.splice(i, 1)
		}
	}

	// 总数量
	const totalNum = computed(() =>
		goodsList.value.reduce((prev, item) => prev + item.num, 0)
	)

	// 总金额
	const totalAmount = computed(() => {
		return goodsList.value.reduce((prev, item) => {
			return prev + item.price * item.num
		}, 0)
	})

	watch(
		goodsList,
		(newVal) => {
			// 当数组发生变化，需将其最新的值存储到本地

			// 注意：newVal 是对象数组，是引用类型，必须先将其序列化，然后进行存储
			localStorage.setItem(KEY, JSON.stringify(newVal))
		},
		{
			// 深度侦听
			deep: true
		}
	)
</script>

<template>
	<div class="goods-container">
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<!-- 有内容的表体 -->
			<tbody v-if="goodsList.length > 0">
				<tr
					v-for="(item, index) in goodsList"
					:key="item.id">
					<td>{{ index + 1 }}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.price }}</td>
					<td>{{ item.num }}</td>
					<td :class="{ active: item.price * item.num >= 30 }">
						{{ item.price * item.num }}
					</td>
					<td>
						<a
							href="#"
							@click="del(index)"
							>删除</a
						>
					</td>
				</tr>
			</tbody>
			<!-- 无内容的表体 -->
			<tbody v-else>
				<tr>
					<td
						colspan="6"
						class="empty">
						暂无数据
					</td>
				</tr>
			</tbody>

			<tfoot>
				<tr>
					<td colspan="2">
						总数量：<b>{{ totalNum }}</b>
					</td>
					<td colspan="4">
						总金额：<b>{{ totalAmount }}</b>
						&yen;
					</td>
				</tr>
			</tfoot>
		</table>
		<form>
			<div class="form-item">
				<label class="label">名称：</label>
				<div class="input">
					<input
						type="text"
						placeholder="请输入名称"
						v-model.trim="goodsItem.name" />
				</div>
			</div>
			<div class="form-item">
				<label class="label">价格：</label>
				<div class="input">
					<input
						type="number"
						placeholder="请输入价格"
						v-model.number="goodsItem.price" />
				</div>
			</div>
			<div class="form-item">
				<div class="label">数量：</div>
				<div class="input">
					<input
						type="number"
						placeholder="请输入数量"
						v-model.number="goodsItem.num" />
				</div>
			</div>
			<div class="form-item">
				<div class="label"></div>
				<div class="input">
					<button
						class="btn-add"
						@click.prevent="add">
						新增
					</button>
				</div>
			</div>
		</form>
	</div>
</template>
<style>
	.goods-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 700px;
		margin: 50px auto;
		font-family: 'Courier New', Courier, monospace;
	}
	.goods-container table {
		flex: 4;
	}
	.goods-container table {
		width: 100%;
		border-spacing: 0;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	.goods-container table th {
		background: #f5f5f5;
	}
	.goods-container table tr:hover td {
		background: #f5f5f5;
	}
	.goods-container table td,
	.goods-container table th {
		padding: 10px;
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		text-align: center;
	}
	.goods-container table td a {
		color: blue;
		text-decoration: none;
	}
	.goods-container table td.active {
		color: #f00;
		font-weight: bold;
	}
	.goods-container table tbody .empty {
		height: 100px;
		color: #999;
		font-size: 18px;
	}
	.goods-container table tfoot {
		background: #f5f5f5;
	}
	.goods-container form {
		margin-top: 50px;
	}
	.goods-container form .form-item {
		display: flex;
		margin-bottom: 20px;
		align-items: center;
	}
	.goods-container form .form-item .label {
		width: 60px;
		font-size: 14px;
		text-align: right;
	}
	.goods-container form .form-item .input {
		flex: 1;
	}
	.goods-container form .form-item input {
		box-sizing: border-box;
		width: 250px;
		height: 36px;
		border: 1px solid #ccc;
		padding: 10px;
		appearance: none;
		outline: none;
		color: #999;
	}
	.goods-container form .form-item input::placeholder {
		color: #999;
	}

	.goods-container form .form-item .btn-add {
		padding: 6px 12px;
		border: 1px solid blue;
		font-size: 14px;
		border-radius: 4px;
		background: blue;
		color: #fff;
		appearance: none;
		outline: none;
		cursor: pointer;
	}
</style>
